<template>
    <div class="articleBody">
        <div class="row">
            <!-- 文章主体 -->
            <div class="col-xs-12 col-sm-9 col-md-9">
                <div class="panel panel-default" style="padding-bottom:30px;margin-bottom:0px;">
                    <ol
                        class="breadcrumb"
                        style="backgroundColor:#fff;border-bottom: 1px solid #eee;"
                    >
                        <li>
                            <router-link to="/home">首页</router-link>
                        </li>
                        <li>
                            <router-link to="/strategy">游记攻略</router-link>
                        </li>
                        <li class="active">···</li>
                    </ol>
                    <h2>
                        {{article.title}}
                        <small>{{article.time}}</small>
                    </h2>
                    <el-divider content-position="left">
                        <router-link to="/person/news">{{article.name}}</router-link>
                    </el-divider>
                    <div class="textMain">
                        <p>&emsp;&emsp;安政6年（1859年），函馆与横滨、长崎一起作为日本首批国际贸易港开放。</p>
                        <p>&emsp;&emsp;港口的开放带动了市井的繁荣，数不清的西洋人与西洋文化从这里上岸，源源不断的向内陆传播。</p>
                        <p>&emsp;&emsp;踏上这片已近零下的冰雪大地。</p>
                        <p>&emsp;&emsp;函馆的荣耀，就从这时开始说起。</p>
                        <img src="../../../static/images/gl_2.jpg" alt />
                        <img src="../../../static/images/gl_3.jpg" alt />
                        <p>Day1</p>
                        <p>&emsp;&emsp;五岛轩（雪河亭本店）-函馆葡萄酒厂-函馆海滨区域散步</p>
                        <p>Day2</p>
                        <p>&emsp;&emsp;函馆山日出- Greenpia大沼滑雪场-七饭滑雪场Peak Cafe-函馆山百万夜景-八幡坂-一文字函馆盐味拉面</p>
                        <p>Day3</p>
                        <p>&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景</p>
                        <img src="../../../static/images/gl_2.jpg" alt />
                        <p>1</p>
                        <p>1</p>
                        <img src="../../../static/images/gl_2.jpg" alt />
                        <p>&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景</p>
                        <p>&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景</p>
                    </div>
                </div>
                <nav class="diyNav">
                    <div id="app" class="share" v-if="showShare">
                        <katotoQrcode :qrWidth="100" :qrHeight="100" :codeMsg="codeMsg"></katotoQrcode>
                    </div>
                    <div class="container">
                        <div>
                            <el-button
                                type="text"
                                icon="el-icon-star-off"
                                @click.once="like()"
                            >6666点赞</el-button>
                            <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="dialogVisible = true"
                            >评论</el-button>
                            <el-button type="text" icon="el-icon-share" @click="toShare">分享</el-button>
                            <el-button
                                type="text"
                                icon="el-icon-star-off"
                                @click.once="collect(item.id)"
                            >收藏</el-button>
                            <el-button type="text" icon="el-icon-delete">屏蔽</el-button>
                            <el-button type="text" icon="el-icon-s-flag">举报</el-button>
                        </div>
                    </div>
                </nav>
            </div>
            <!-- 右边栏 -->
            <div
                class="col-xs-12 col-sm-3 col-md-3"
                style="right:20px;left:auto;top:auto;z-index: 0;"
            >
                <div class="panel panel-default">
                    <div class="page-header h2" style="marginTop:20px;">
                        <small>作者</small>
                    </div>
                    <div class="row" style="margin:5px;">
                        <el-avatar
                            shape="square"
                            :size="50"
                            :src="author.src"
                            class="col-sm-3 col-md-3"
                            style="box-shadow: 1px 1px 1px 0 #0084ffbe;paddingLeft:0;"
                        ></el-avatar>
                        <div class="col-sm-7 col-md-8" style="font-weight: 700;">
                            <div>{{author.name}}</div>
                            <el-button type="primary" plain size="mini" @click="gotoNews">
                                <i class="el-icon-message"></i> 联系作者
                            </el-button>
                        </div>
                    </div>

                    <div class="panel" style="borderColor:#0084ffbe;">{{author.brief}}</div>
                </div>
                <div @click="gotoWrite">
                    <el-button type="primary" plain>我也要写攻略</el-button>
                </div>
                <!-- <div class="panel panel-default">
                    <div class="page-header h2" style="marginTop:20px;">
                        <small>相关攻略</small>
                    </div>
                    <div class="gList">
                        <ul class="list-group">
                            <li>
                                <div>赴一场函馆的冬日之约</div>
                            </li>
                            <li>
                                <div>赴一场函馆的冬日之约</div>
                            </li>
                            <li>
                                <div>赴一场函馆的冬日之约</div>
                            </li>
                            <li>
                                <div>赴一场函馆的冬日之约</div>
                            </li>
                            <li>
                                <div>赴一场函馆的冬日之约</div>
                            </li>
                        </ul>
                    </div>
                </div>-->
            </div>
        </div>
        <!-- 评论模拟框 -->
        <el-dialog
            title="评论"
            :visible.sync="dialogVisible"
            width="70%"
            style="position: fixed;top: -30px;"
        >
            <div class="commentBody">
                <el-divider></el-divider>
                <div v-for="(item,index) in commentList" :key="index">
                    <div class="row">
                        <el-avatar
                            shape="square"
                            :size="25"
                            :src="item.src"
                            class="col-xs-4 col-sm-4 col-md-4"
                            style="paddingLeft:0;"
                        ></el-avatar>
                        <div class="col-xs-6 col-sm-6 col-md-6">{{item.user_id}}</div>
                    </div>
                    <div style="paddingLeft:50px">{{item.context}}</div>
                    <div style="paddingLeft:50px">
                        <el-button
                            type="text"
                            @click.once="like(item.user_id)"
                            icon="el-icon-star-off"
                        >{{item.likeNum}}点赞</el-button>
                        <!-- <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="dialogVisible = true"
                        >{{item.plNum}}评论</el-button>-->
                        <el-button type="text" icon="el-icon-s-flag">举报</el-button>
                    </div>
                    <el-divider></el-divider>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-form :inline="true" label-position="top">
                    <el-form-item class="commentInput">
                        <el-input
                            type="textarea"
                            v-model="commentInput"
                            placeholder
                            size="medium"
                            style="font-size: 17px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="commentButton">评 论</el-button>
                    </el-form-item>
                </el-form>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import katotoQrcode from "katoto_qrcode";
export default {
    components: {
        katotoQrcode
    },
    data() {
        return {
            author: {
                name: "用户xy973823", //用户名字
                user_id: "nb56781",
                brief: ` 踏上这片已近零下的冰雪大地。函馆的荣耀，就从这时开始说起。`,
                src:
                    "https://7465-test-wz0tn-1301797917.tcb.qcloud.la/ly/0de7c1dc0dbf5648511a11f9ff7bfafb%20(1).jpg?sign=fb5d17f1420bd7912a44115f46aae9f7&t=1588227692" //头像
                //文章
            },
            article: {
                text_id: "1",
                time: "2020/03/12",
                title: "慢行日本 | 赴一场函馆的冬日之约",
                text: ` <p>&emsp;&emsp;安政6年（1859年），函馆与横滨、长崎一起作为日本首批国际贸易港开放。</p>
                        <p>&emsp;&emsp;港口的开放带动了市井的繁荣，数不清的西洋人与西洋文化从这里上岸，源源不断的向内陆传播。</p>
                        <p>&emsp;&emsp;踏上这片已近零下的冰雪大地。</p>
                        <p>&emsp;&emsp;函馆的荣耀，就从这时开始说起。</p>
                        <img src="../../../static/images/gl_2.jpg" alt />
                        <img src="../../../static/images/gl_3.jpg" alt />
                        <p>Day1</p>
                        <p>&emsp;&emsp;五岛轩（雪河亭本店）-函馆葡萄酒厂-函馆海滨区域散步</p>
                        <p>Day2</p>
                        <p>&emsp;&emsp;函馆山日出- Greenpia大沼滑雪场-七饭滑雪场Peak Cafe-函馆山百万夜景-八幡坂-一文字函馆盐味拉面</p>
                        <p>Day3</p>
                        <p>&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景</p>
                        <img src="../../../static/images/gl_2.jpg" alt />
                        <p>1</p>
                        <p>1</p>
                        <img src="../../../static/images/gl_2.jpg" alt />
                        <p>&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景</p>
                        <p>&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景&emsp;&emsp;函馆朝市-大沼国定公园-Sushidokoro Kihara寿司料理-函馆市热带植物园-无印良品-丸井今井函馆-五棱郭夜景</p>`
            },
            commentList: [
                {
                    user_id: "nb56781",
                    likeNum: "8658",
                    plNum: "678",
                    src: require("../../../static/images/gl_2.jpg"),
                    context: "这个功能真难做！"
                },
                {
                    user_id: "nb56782",
                    likeNum: "8658",
                    plNum: "678",
                    src: require("../../../static/images/gl_2.jpg"),
                    context: "这个功能真难做！"
                },
                {
                    user_id: "nb56783",
                    likeNum: "8658",
                    plNum: "678",
                    src: require("../../../static/images/gl_2.jpg"),
                    context: "这个功能真难做！"
                }
            ],
            dialogVisible: false,
            commentInput: null,
            showShare: false,
            codeMsg: ""
        };
    },
    methods: {
        like(id) {
            if (1) {
                this.$data.commentList.map(item => {
                    if (item.user_id == id) {
                        return item.likeNum++;
                    }
                    // console.log(item.id);
                });
            }
            // console.log(id);
            // this.commentList.likeNum++;
        },
        collect(id) {
            if (1) {
                this.$message({
                    message: "收藏成功",
                    type: "success"
                });
            }
            // console.log(id);
        },
        commentButton() {
            // console.log(this.commentInput);
            this.commentList.unshift({
                user_id: new Date().getTime(),
                likeNum: new Date().getFullYear(),
                plNum: new Date().getMilliseconds(),
                src: require("../../../static/images/gl_2.jpg"),
                context: this.commentInput
            });
            this.commentInput = null;
        },
        toShare() {
            if (this.showShare) {
                this.showShare = false;
            } else {
                this.showShare = true;
                this.codeMsg =
                    "http://localhost:3030/#/strategy/article/" +
                    this.$route.query.id;
            }
        },
        gotoNews() {
            if (!this.$global.user) {
                this.gotoLogin();
            } else {
                this.$router.push({ path: "/person/news", query: this.author });
            }
        },
        gotoWrite() {
            if (!this.$global.user) {
                this.gotoLogin();
            } else {
                this.$router.push({ path: "/write" });
            }
        },
        gotoLogin() {
            this.$router.push({
                path: "/dl",
                query: { path: this.$route.path }
            });
        }
    },
    mounted() {}
};
</script>
<style>
div.articleBody {
    margin: 10px 30px;
    /* background-color: #fff; */
}
/* row */
div.articleBody > div.row > div {
    padding: 0 10px;
}
div.articleBody > div.row div.panel {
    padding: 10px;
    background-color: #fff;
}
div.articleBody div.textMain > img {
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 1px 1px 1px 0 #b0b4b88a;
    width: 100%;
}

/* 底栏 */
div.articleBody > div.row nav.diyNav {
    background-color: hsla(224, 79%, 87%, 0.5);
    border-color: #e7e7e7;
    bottom: 0;
    margin-bottom: 0;
    border-width: 1px 0 0;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 4;
    padding-left: 30px;
}

div.articleBody > div.row nav.diyNav button.el-button {
    margin: 5px 10px;
}
/* 右边 */
div.articleBody div.gList ul > li {
    display: block;
    border-bottom: 1px solid #eee;
    padding: 5px;
}

/* 模拟框 */
div.articleBody div.el-dialog__body {
    padding: 5px 20px;
}

div.articleBody div.commentBody {
    height: 55vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
div.articleBody div.commentBody div.row div,
div.articleBody div.commentBody div.row span {
    left: 15px;
}
div.articleBody div.commentBody div.el-divider--horizontal {
    margin: 10px 0;
}
div.articleBody div.commentInput {
    width: 50vw;
    margin: 0 10px;
}

@media (max-width: 770px) {
    div.articleBody > div.row > div:nth-child(2) {
        display: none;
    }
}
@media (max-width: 800px) {
    div.articleBody div.commentInput {
        width: 45vw;
        margin: 0 10px;
    }
}

/* 分享 */
div.articleBody div.share {
    position: absolute;
    left: 220px;
    top: -130px;
    background-color: rgba(255, 255, 255, 0.9);
    width: 140px;
    height: 140px;
}
</style>